<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Deepseek API 调用</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <style>
    #chat-container {
      display: flex;
      height: 100vh;
    }
    #menu {
      width: 250px;
      background-color: #f8fafc;
      border-right: 1px solid #e2e8f0;
      padding: 20px;
    }
    #chat-window {
      flex-grow: 1;
      padding: 20px;
      overflow-y: auto;
    }
    .message {
      margin-bottom: 10px;
    }
    .message.sent {
      text-align: right;
      color: #fff;
      background-color: #1a202c;
      padding: 10px;
      border-radius: 5px;
      max-width: 60%;
    }
    .message.received {
      color: #1a202c;
      background-color: #edf2f7;
      padding: 10px;
      border-radius: 5px;
      max-width: 60%;
    }
    #input-container {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    #input-container textarea {
      flex-grow: 1;
      padding: 10px;
      border: 1px solid #e2e8f0;
      border-radius: 5px;
    }
    #input-container button {
      padding: 10px 20px;
      background-color: #1a202c;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body class="bg-gray-100">
<div id="chat-container">
  <div id="menu" class="p-4 bg-gray-100">
    <!-- 菜单内容可以在这里添加 -->
    <h2 class="text-xl font-bold mb-4">菜单</h2>
    <ul>
      <li class="mb-4"><a href="#" class="text-blue-600 hover:underline">选项 1</a></li>
      <li class="mb-4"><a href="#" class="text-blue-600 hover:underline">选项 2</a></li>
      <li><a href="#" class="text-blue-600 hover:underline">选项 3</a></li>
    </ul>
  </div>
  <div id="chat-window" class="flex flex-col">
    <div v-for="(message, index) in chatHistory" :key="index" :class="['message', message.sent ? 'sent' : 'received']">
      {{ message.text }}
    </div>
  </div>
</div>
<div id="input-container">
  <textarea id="inputText" v-model="inputText" @keyup.enter="submitOnEnter" placeholder="按 Enter 发送消息..."></textarea>
  <button @click="callDeepseekApi" class="ml-4">发送</button>
</div>
<script>
  new Vue({
    el: '#chat-container',
    data: {
      inputText: '',
      chatHistory: []
    },
    methods: {
      callDeepseekApi() {
        if (this.inputText.trim() === '') return;

        axios.get('/ai/qianfan', {
          params: {
            input: this.inputText
          }
        })
                .then(response => {
                  const responseText = JSON.stringify(response.data, null, 2); // 格式化JSON输出，便于阅读
                  this.chatHistory.push({ text: responseText, sent: true });
                  this.scrollToBottom();
                  this.inputText = '';
                })
                .catch(error => {
                  console.error('请求失败:', error);
                  this.chatHistory.push({ text: '请求失败，请检查您的输入或网络状况。', sent: true });
                  this.scrollToBottom();
                });
      },
      submitOnEnter(event) {
        if (event.key === 'Enter' && !event.shiftKey) {
          event.preventDefault();
          this.callDeepseekApi();
        }
      },
      scrollToBottom() {
        const chatWindow = document.querySelector('#chat-window');
        chatWindow.scrollTop = chatWindow.scrollHeight;
      }
    },
    watch: {
      chatHistory() {
        this.scrollToBottom();
      }
    },
    mounted() {
      this.scrollToBottom(); // 确保页面加载时滚动到底部
    }
  });
</script>
</body>
</html>
